<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <li slot="bread"><a href="#">商品</a></li>
    </nav-bread>
    <div class="container">
      <ul class="breadcrumb text-right">
        <li @click="sortGoods"><a href="javascript:;">商品排序</a></li>
      </ul>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-3 col-md-3">
          <div class="list-group">
            <a href="#" class="list-group-item" @click="priceChecked='all'" :class="{'cur':priceChecked=='all'}">all</a>
            <a href="#" class="list-group-item"
               v-for="(item,index) in priceFilter"
               :class="{'cur':priceChecked==index}"
               @click="setpriceChecked(index)">
              ￥{{item.startPrice}}-￥{{item.endPrice}}</a>
          </div>
        </div>
        <div class="col-sm-9 col-md-9">
          <div class="row">
            <div class="col-sm-6 col-md-4" v-for="(item,index) in goodsList" :key="index">
              <div class="thumbnail">
                <img :src="'/static/'+item.productImage" alt="...">
                <div class="caption">
                  <h3>{{item.productName}}</h3>
                  <p>￥{{item.salePrice}}</p>
                  <p>
                    <a href="javascript:;"
                       @click="addCart(item.productId)"
                       class="btn btn-primary" role="button">加入购物车</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            <img v-show="loading" src="/static/loading-svg/loading.gif" alt="">
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 100px;"></div>
    <nav-footer></nav-footer>
    <model :mdShow="mdShow" v-on:close="closeModel">
      <div slot="title">
        <h4 class="modal-title">登陆</h4>
      </div>
      <span slot="msg">
          请先登录,否则无法加入购物车
        </span>
      <div slot="btnGroup">
        <button @click="mdShow = false">关闭</button>
      </div>
    </model>
    <model :mdShow="mdShowCart" v-on:close="closeModel">
      <div slot="title">
        <h4 class="modal-title" >提示</h4>
      </div>
      <span slot="msg">
            成功加入购物车
        </span>
      <div slot="btnGroup">
        <button @click="mdShowCart = false">继购物续</button>
        <router-link to="/cart" >查看购物车</router-link>
      </div>
    </model>
  </div>

</template>

<script>
  import NavHeader from '@/components/Header'
  import NavFooter from '@/components/Footer'
  import NavBread from '@/components/Bread'
  import Model from '@/components/Model'
  import axios from 'axios'

  export default {
    name: "GoodsList",
    data() {
      return {
        goodsList: [],//商品列表
        priceFilter: [
          {
            startPrice: "0.00",
            endPrice: "100.00"
          },
          {
            startPrice: "100.00",
            endPrice: "500.00"
          },
          {
            startPrice: "500.00",
            endPrice: "1000.00"
          },
          {
            startPrice: "1000.00",
            endPrice: "1000.00"
          }
        ],
        priceChecked: 'all',
        sortFlag: false,//排序
        page: 1,//页码
        pageSize: 4,//总共条数
        busy: true,
        loading: false,
        mdShow: false,
        mdShowCart:false
      }
    },
    components: {
      NavHeader,
      NavFooter,
      NavBread,
      Model
    },
    mounted: function () {
      this.getGoods()
    },
    methods: {
      getGoods: function (flag) {
        var vm = this;
        var param = {
          page: this.page,
          pageSize: this.pageSize,
          sort: this.sortFlag ? 1 : -1,
          priceLevel: this.priceChecked
        }
        this.loading = true;
        axios.get("/goods/list", {
          params: param
        }).then((res) => {
          console.log(res);
          if (res.data.status == '0') {
            this.loading = false;
            if (flag) {
              vm.goodsList = vm.goodsList.concat(res.data.result.list)
              if (res.data.result.count == 0) {
                vm.busy = true
              } else {
                vm.busy = false
              }
            } else {
              vm.goodsList = res.data.result.list;
              vm.busy = false
            }
          } else {
            vm.goodsList = []
          }
        })
      },
      //排序
      sortGoods() {
        this.sortFlag = !this.sortFlag;
        this.page = 1;
        this.getGoods()
      },
      //价钱分类
      setpriceChecked(index) {
        this.priceChecked = index;
        this.page = 1;
        this.getGoods()
      },
      //加载更多
      loadMore: function () {
        var self = this;
        this.busy = true;
        setTimeout(() => {
          self.page++;
          self.getGoods(true)
        }, 500);
      },
      //加入购物车
      addCart(productId) {
        var self = this;
        axios.post("/goods/addCart", {
          productId: productId
        }).then((res) => {
          console.log(res);
          if (res.data.status == "0") {
            this.mdShowCart = true;
            self.$store.commit("updateCartCount",1)
          } else {
            this.mdShow = true
          }
        })
      },
      closeModel: function () {
        this.mdShow = false;
      }
    }
  }
</script>

<style scoped>
  .cur {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
  }
</style>
